<!--
 * @Description: 
 * @Author: zwx
 * @Date: 2024-11-06 15:46:38
 * @LastEditors: zwx
 * @LastEditTime: 2024-11-06 15:58:49
 * @又活了一天: 你真厉害！！！
-->
<!-- 这是HTML文档的声明，指明文档类型为HTML5 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置字符编码为UTF-8，确保多语言支持 -->
    <meta charset="UTF-8">
    <!-- 视口设置，确保页面在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>注册</title>
    <style>
        /* 全局样式重置，包括外边距、内边距、盒模型计算方式 */
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 去除超链接的下划线 */
        /* a{
            text-decoration:none;
        } */
        /* 为body设置全局样式，包括顶部填充和背景图设置 */
        body{
            padding-top:25px;
            background-image:url(./img/cc.png);
            background-repeat:no-repeat;
            background-position: center;
        }
        /* #app容器的样式，设置宽度、高度、边框和背景色，并使其水平居中 */
        #app{
            width:900px;
            height: 500px;
            border:8px solid #eee;
            margin: auto;
            background-color: white;
        }
        /* .divleft类样式，设置浮动、宽度和内边距 */
        .divleft{
            float: left;
            width:25%;
            padding-top: 15px;
            padding-left:15px;
        }
        /* .divleft中第一个p标签的样式，设置颜色和字体大小 */
        .divleft>p:first-child{
            color: #ffd026;
            font-size: 20px;
        }
        /* .divleft中最后一个p标签的样式，设置颜色和字体大小 */
        .divleft>p:last-child{
            color: #a6a66a;
            font-size: 20px;
        }
        /* .divmiddle类样式，设置浮动和宽度 */
        .divmiddle{
            float: left;
            width:calc(100%-25%-25%);
        }
        /* 表格样式，设置字体颜色 */
        table{
            color: #a6a6a6
        }
        /* .tdleft类样式，设置宽度、高度、文本对齐和内边距 */
        .tdleft{
            width: 100px;
            height: 45px;
            text-align: right;
            padding-right:45px;
        }
        /* #imagecode样式，设置验证码图片的高度和垂直对齐方式 */
        #imagecode{
            height: 32px;
            vertical-align: middle;
        }
        /* #tdsubmit样式，设置文本居中 */
        #tdsubmit{
            text-align: center;
        }
        /* #btnSubmit样式，设置按钮的尺寸、背景色、边框、颜色和圆角 */
        #btnSubmit{
            width: 115px;
            height:30px;
            background-color: #ffd026;
            border: 0px;
            color: #a6a6a6;
            border-radius: 5px;
        }
        /* 表单输入框的统一样式 */
        #username,#password,#checkcode,#Email,#姓名,#手机号,#出生日期{
            width: 251px;
            height: 32px;
            border: 1px solid #a6a6a6;
            border-radius: 5px;
            padding-left: 10px;
        }
        /* #checkcode输入框的样式，设置宽度 */
        #checkcode{
            width: 110px;
        }
        
        /* .divright类样式，设置浮动、宽度和内边距 */
        .divright{
            float: right;
            width:25%;
            padding-top: 15px;
            padding-right:15px;
        }
        /* .divright中p标签的样式，设置字体大小、颜色和文本对齐 */
        .divright>p{
            font-size: 15px;
            color: #a6a6a6;
            text-align: right;
        }
        /* .divright中a标签的样式，设置链接颜色 */
        .divright>p a{
            color:pink;
        }
    </style>
</head>
<body>
    <!-- 页面的主要容器，设置背景图片 -->
    <div id="app">
        <!-- 左侧区域，包含注册标题 -->
        <div class="divleft">
            <P>新用户注册</P>
            <p>USER REGISTER</p>
        </div>
        <!-- 中间区域，包含注册表单 -->
        <div class="divmiddle">
            <div class="divForm">
                <!-- 表单开始 -->
                <form action="#" method="post">
                    <table>
                        <!-- 用户名输入行 -->
                        <tr>
                            <td class="tdleft">
                                <label for="username">用户名</label>
                            </td>
                            <td class="tdright">
                                <input type="text" name="username" id="username" placeholder="请输入用户名">
                            </td>
                        </tr>
                        <!-- 密码输入行 -->
                        <tr>
                            <td class="tdleft">
                                <label for="password">密码</label>
                            </td>
                            <td class="tdRight">
                                <input type="text" name="password" id="password" placeholder="请输入密码">
                            </td>
                        </tr>
                        <!-- Email输入行 -->
                        <tr>
                            <td class="tdleft">
                                <label for="Email">Email</label>
                            </td>
                            <td class="tdRight">
                                <input type="text" name="Email" id="Email" placeholder="请输入Email">
                            </td>
                        </tr>
                        <!-- 姓名输入行 -->
                        <tr>
                            <td class="tdleft">
                                <label for="姓名">姓名</label>
                            </td>
                            <td class="tdRight">
                                <input type="text" name="姓名" id="姓名" placeholder="请输入真实姓名">
                            </td>
                        </tr>
                        <!-- 手机号输入行 -->
                        <tr>
                            <td class="tdleft">
                                <label for="手机号">手机号</label>
                            </td>
                            <td class="tdRight">
                                <input type="text" name="手机号" id="手机号" placeholder="请输入您的手机号">
                            </td>
                        </tr>
                        <!-- 性别选择行 -->
                        <tr>
                            <td class="tdleft">
                                <label for="gender">性别</label>
                            </td>
                            <td class="tdRight">
                                <input type="radio" name="gender" value="male">男
                                <input type="radio" name="gender" value="female">女
                            </td>
                        </tr>
                        <!-- 出生日期输入行 -->
                        <tr>
                            <td class="tdright">
                                <label for="出生日期">出生日期</label>
                            </td>
                            <td class="tdRight">
                                <input type="date" name="birth" id="出生日期">
                            </td>
                        </tr>
                        <!-- 验证码输入行 -->
                        <tr>
                            <td class="tdleft">
                                <label for="checkcode">验证码</label>
                            </td>
                            <td class="tdRight">
                                <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                <img id="imagecode" src="./img/img.png" alt="验证码">
                            </td>
                        </tr>
                        <!-- 提交按钮行 -->
                        <tr>
                            <td id="tdsubmit" colspan="2"><input id="btnSubmit" type="submit" value="注册"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <!-- 右侧区域，包含登录链接 -->
        <div class="divright">
            <p>已有账号？<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>